<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">

<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
	<title>产品详情页</title>
	 <link rel="icon" href="assets/img/favicon.ico">

    <link rel="stylesheet" type="text/css" href="/css/webbase.css" />
    <link rel="stylesheet" type="text/css" href="/css/pages-item.css" />
    <link rel="stylesheet" type="text/css" href="/css/pages-zoom.css" />
    <link rel="stylesheet" type="text/css" href="/css/widget-cartPanelView.css" />
</head>

<body>
<#--转成json -->
<#--自定义属性-->
<#assign customAttributeItemList=goodsDesc.customAttributeItems?eval>
<#--规格-->
<#assign specificationItemList=goodsDesc.specificationItems?eval>
<#--图片-->
<#assign itemImageList=goodsDesc.itemImages?eval>
<script>
	//定义SKU列表变量[{id:111,xxx:xx},{id:2,xxx:xx}]
	var skuList=[
		<#list itemList as item >
		{
		   "id":${item.id?c},//？c去掉千位数字补全“逗号”
		   "title":"${item.title}",
		   "sellPoint":"${item.sellPoint}",
		   "price":${item.price?c},
		   "spec":${item.spec}
		},
		</#list>
	]
</script>


<!--页面顶部 开始-->
<#include "head.ftl">
<!--页面顶部 结束-->
	<div class="py-container">
		<div id="item">
			<div class="crumb-wrap">
				<ul class="sui-breadcrumb">
					<li>
						<a href="#">${iteCat1.name}</a>
					</li>
					<li>
						<a href="#">${iteCat2.name}</a>
					</li>
					<li>
						<a href="#">${iteCat3.name}</a>
					</li>
					<li class="active">${goods.goodsName}</li>
				</ul>
			</div>
			<!--product-info-->
			<div class="product-info">
				<div class="fl preview-wrap">
					<!--放大镜效果-->
					<div class="zoom">
						<!--默认第一个预览-->
						<div id="preview" class="spec-preview">
							<span class="jqzoom"><img jqimg="${itemImageList[0].url}" src="${itemImageList[0].url}" width="400px" height="400px"/></span>
						</div>
						<!--下方的缩略图-->
						<div class="spec-scroll">
							<a class="prev">&lt;</a>
							<!--左右按钮-->
							<div class="items">
								<ul>
									<#list itemImageList as images >
										<li><img src="${images.url}" bimg="${images.url}" onmousemove="preview(this)" /></li>
									</#list>
								</ul>
							</div>
							<a class="next">&gt;</a>
						</div>
					</div>
				</div>
				<div class="fr itemInfo-wrap">
					<div class="sku-name">
						<input type="hidden" id="goodsId" value="${goods.id?c}">
						<h4>${goods.goodsName}</h4>
					</div>
					<div class="news"><span>${goods.caption}</span></div>
					<div class="summary">
						<div class="summary-wrap">
							<div class="fl title">
								<i>价　　格</i>
							</div>
							<div class="fl price">
								<i>¥</i>
								<span  id="price">${goods.price}</span>
								<span>降价通知</span>
							</div>
							<div class="fr remark">
								<i>累计评价</i><em>612188</em>
							</div>
						</div>
						<div class="summary-wrap">
							<div class="fl title">
								<i>促　　销</i>
							</div>
							<div class="fl fix-width">
								<i class="red-bg">加价购</i>
								<em class="t-gray">满999.00另加20.00元，或满1999.00另加30.00元，或满2999.00另加40.00元，即可在购物车换
购热销商品</em>
							</div>
						</div>
					</div>
					<div class="support">
						<div class="summary-wrap">
							<div class="fl title">
								<i>支　　持</i>
							</div>
							<div class="fl fix-width">
								<em class="t-gray">以旧换新，闲置手机回收  4G套餐超值抢  礼品购</em>
							</div>
						</div>
						<div class="summary-wrap">
							<div class="fl title">
								<i>配 送 至</i>
							</div>
							<div class="fl fix-width">
								<em class="t-gray">满999.00另加20.00元，或满1999.00另加30.00元，或满2999.00另加40.00元，即可在购物车换购热销商品</em>
							</div>
						</div>
					</div>
					<div class="clearfix choose">
						<div id="specification" class="summary-wrap clearfix">
							<#list specificationItemList as spec>
							<dl>
								<dt>
									<div class="fl title">
									<i>${spec.attributeName}</i>
								</div>
								</dt><#--<span title="点击取消选择">&nbsp;</span>  class="selected"-->
								<#list spec.attributeValue as attr >
								<dd><a name="specOptions" href="javascript:selectSpec('${spec.attributeName}','${attr}');">${attr}</a></dd>
								</#list>
							</dl>
							</#list>
							
						</div>
					
						<div class="summary-wrap">
							<div class="fl title">
								<div class="control-group">
									<div class="controls">
										<input autocomplete="off" type="text" value="1" minnum="1" class="itxt" />
										<a href="javascript:increment(1)" class="increment plus">+</a>
										<a href="javascript:increment(-1)" class="increment mins">-</a>
									</div>
								</div>
							</div>
							<div class="fl">
								<ul class="btn-choose unstyled">
									<li>
										<button onclick="insetCart()" target="_blank" class="sui-btn  btn-danger addshopcar">加入购物车</button>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!--product-detail-->
			<div class="clearfix product-detail">
				<div class="fl aside">
					<ul class="sui-nav nav-tabs tab-wraped">
						<li class="active">
							<a href="#index" data-toggle="tab">
								<span>相关分类</span>
							</a>
						</li>
						<li>
							<a href="#profile" data-toggle="tab">
								<span>推荐品牌</span>
							</a>
						</li>
					</ul>
					<div class="tab-content tab-wraped">
						<div id="index" class="tab-pane active">
							<ul class="part-list unstyled">
								<li>手机</li>
								<li>手机壳</li>
								<li>内存卡</li>
								<li>Iphone配件</li>
								<li>贴膜</li>
								<li>手机耳机</li>
								<li>移动电源</li>
								<li>平板电脑</li>
							</ul>
							<ul class="goods-list unstyled">
								<li>
									<div class="list-wrap">
										<div class="p-img">
											<img src="img/_/part01.png" />
										</div>
										<div class="attr">
											<em>Apple苹果iPhone 6s (A1699)</em>
										</div>
										<div class="price">
											<strong>
											<em>¥</em>
											<i>6088.00</i>
										</strong>
										</div>
										<div class="operate">
											<a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a>
										</div>
									</div>
								</li>
								<li>
									<div class="list-wrap">
										<div class="p-img">
											<img src="img/_/part02.png" />
										</div>
										<div class="attr">
											<em>Apple苹果iPhone 6s (A1699)</em>
										</div>
										<div class="price">
											<strong>
											<em>¥</em>
											<i>6088.00</i>
										</strong>
										</div>
										<div class="operate">
											<a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a>
										</div>
									</div>
								</li>
								<li>
									<div class="list-wrap">
										<div class="p-img">
											<img src="img/_/part03.png" />
										</div>
										<div class="attr">
											<em>Apple苹果iPhone 6s (A1699)</em>
										</div>
										<div class="price">
											<strong>
											<em>¥</em>
											<i>6088.00</i>
										</strong>
										</div>
										<div class="operate">
											<a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a>
										</div>
									</div>
									<div class="list-wrap">
										<div class="p-img">
											<img src="img/_/part02.png" />
										</div>
										<div class="attr">
											<em>Apple苹果iPhone 6s (A1699)</em>
										</div>
										<div class="price">
											<strong>
											<em>¥</em>
											<i>6088.00</i>
										</strong>
										</div>
										<div class="operate">
											<a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a>
										</div>
									</div>
									<div class="list-wrap">
										<div class="p-img">
											<img src="img/_/part03.png" />
										</div>
										<div class="attr">
											<em>Apple苹果iPhone 6s (A1699)</em>
										</div>
										<div class="price">
											<strong>
											<em>¥</em>
											<i>6088.00</i>
										</strong>
										</div>
										<div class="operate">
											<a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a>
										</div>
									</div>
								</li>
							</ul>
						</div>
						<div id="profile" class="tab-pane">
							<p>推荐品牌</p>
						</div>
					</div>
				</div>
				<div class="fr detail">
					<div class="clearfix fitting">
						<h4 class="kt">选择搭配</h4>
						<div class="good-suits">
							<div class="fl master">
								<div class="list-wrap">
									<div class="p-img">
										<img src="img/_/l-m01.png" />
									</div>
									<em>￥5299</em>
									<i>+</i>
								</div>
							</div>
							<div class="fl suits">
								<ul class="suit-list">
									<li class="">
										<div id="">
											<img src="img/_/dp01.png" />
										</div>
										<i>Feless费勒斯VR</i>
										<label data-toggle="checkbox" class="checkbox-pretty">
    <input type="checkbox"><span>39</span>
  </label>
									</li>
									<li class="">
										<div id=""><img src="img/_/dp02.png" /> </div>
										<i>Feless费勒斯VR</i>
										<label data-toggle="checkbox" class="checkbox-pretty">
    <input type="checkbox"><span>50</span>
  </label>
									</li>
									<li class="">
										<div id=""><img src="img/_/dp03.png" /></div>
										<i>Feless费勒斯VR</i>
										<label data-toggle="checkbox" class="checkbox-pretty">
    <input type="checkbox"><span>59</span>
  </label>
									</li>
									<li class="">
										<div id=""><img src="img/_/dp04.png" /></div>
										<i>Feless费勒斯VR</i>
										<label data-toggle="checkbox" class="checkbox-pretty">
    <input type="checkbox"><span>99</span>
  </label>
									</li>
								</ul>
							</div>
							<div class="fr result">
								<div class="num">已选购0件商品</div>
								<div class="price-tit"><strong>套餐价</strong></div>
								<div class="price">￥5299</div>
								<button class="sui-btn  btn-danger addshopcar">加入购物车</button>
							</div>
						</div>
					</div>
					<div class="tab-main intro">
						<ul class="sui-nav nav-tabs tab-wraped">
							<li class="active">
								<a href="#one" data-toggle="tab">
									<span>商品介绍</span>
								</a>
							</li>
							<li>
								<a href="#two" data-toggle="tab">
									<span>规格与包装</span>
								</a>
							</li>
							<li>
								<a href="#three" data-toggle="tab">
									<span>售后保障</span>
								</a>
							</li>
							<li>
								<a href="#four" data-toggle="tab">
									<span onclick="getCommentByGoodsId()">商品评价</span>
								</a>
							</li>
							<li>
								<a href="#five" data-toggle="tab">
									<span>手机社区</span>
								</a>
							</li>
						</ul>
						<div class="clearfix"></div>
						<div class="tab-content tab-wraped">
							<div id="one" class="tab-pane active">
								<ul class="goods-intro unstyled">
									<#list customAttributeItemList as custom>
									<li>${custom.text}：${custom.value}</li>
									</#list>
								</ul>
								<div class="intro-detail">
									${goodsDesc.introduction}
								</div>
							</div>
							<div id="two" class="tab-pane">
								<p> ${goodsDesc.packageList}</p>
							</div>
							<div id="three" class="tab-pane">
								<p>${goodsDesc.saleService}</p>
							</div>
							<div id="four" class="tab-pane">
								<p>商品评价</p>
							</div>
							<div id="five" class="tab-pane">
								<p>手机社区</p>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!--like-->
			<div class="clearfix"></div>
			<div class="like">
				<h4 class="kt">猜你喜欢</h4>
				<div class="like-list">
					<ul class="yui3-g">
						<li class="yui3-u-1-6">
							<div class="list-wrap">
								<div class="p-img">
									<img src="img/_/itemlike01.png" />
								</div>
								<div class="attr">
									<em>DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</em>
								</div>
								<div class="price">
									<strong>
											<em>¥</em>
											<i>3699.00</i>
										</strong>
								</div>
								<div class="commit">
									<i class="command">已有6人评价</i>
								</div>
							</div>
						</li>
						<li class="yui3-u-1-6">
							<div class="list-wrap">
								<div class="p-img">
									<img src="img/_/itemlike02.png" />
								</div>
								<div class="attr">
									<em>Apple苹果iPhone 6s/6s Plus 16G 64G 128G</em>
								</div>
								<div class="price">
									<strong>
											<em>¥</em>
											<i>4388.00</i>
										</strong>
								</div>
								<div class="commit">
									<i class="command">已有700人评价</i>
								</div>
							</div>
						</li>
						<li class="yui3-u-1-6">
							<div class="list-wrap">
								<div class="p-img">
									<img src="img/_/itemlike03.png" />
								</div>
								<div class="attr">
									<em>DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</em>
								</div>
								<div class="price">
									<strong>
											<em>¥</em>
											<i>4088.00</i>
										</strong>
								</div>
								<div class="commit">
									<i class="command">已有700人评价</i>
								</div>
							</div>
						</li>
						<li class="yui3-u-1-6">
							<div class="list-wrap">
								<div class="p-img">
									<img src="img/_/itemlike04.png" />
								</div>
								<div class="attr">
									<em>DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</em>
								</div>
								<div class="price">
									<strong>
											<em>¥</em>
											<i>4088.00</i>
										</strong>
								</div>
								<div class="commit">
									<i class="command">已有700人评价</i>
								</div>
							</div>
						</li>
						<li class="yui3-u-1-6">
							<div class="list-wrap">
								<div class="p-img">
									<img src="img/_/itemlike05.png" />
								</div>
								<div class="attr">
									<em>DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</em>
								</div>
								<div class="price">
									<strong>
											<em>¥</em>
											<i>4088.00</i>
										</strong>
								</div>
								<div class="commit">
									<i class="command">已有700人评价</i>
								</div>
							</div>
						</li>
						<li class="yui3-u-1-6">
							<div class="list-wrap">
								<div class="p-img">
									<img src="img/_/itemlike06.png" />
								</div>
								<div class="attr">
									<em>DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</em>
								</div>
								<div class="price">
									<strong>
											<em>¥</em>
											<i>4088.00</i>
										</strong>
								</div>
								<div class="commit">
									<i class="command">已有700人评价</i>
								</div>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
	<!-- 底部栏位 -->
	
<!--页面底部  开始 -->
<#include "food.ftl">
<!--页面底部  结束 -->
</body>
<script>

	var goodsId = $("#goodsId").val();
	function getCommentByGoodsId(){
		$.ajax({
			url: "http://localhost:9020/comment/getCommentByGoodsId",
			type: "post",
			dataType: "json",
			//data:{goodsId:149187842868073,pageNumber:$("#pageNumber").val(),pageSize:$("#pageSize").val()},
			data:{goodsId:goodsId,pageNumber:$("#pageNumber").val(),pageSize:$("#pageSize").val()},
			success: function (result) {
				if(result.code == 200) {
					var comment = result.data.list;
					var html = "";
					for (var i = 0; i < comment.length; i++) {
						html += "<table>";
						html += "<tr>";
						html += "<td>用户昵称：</td>";
						html += "<td>" + comment[i].userName + "</td>";
						html += "</tr>";
						html += "<tr>";
						html += "<td>评价时间：</td>";
						html += "<td>" + comment[i].startTime + "</td>";
						html += "</tr>";
						html += "<tr>";
						html += "<td>评价内容：</td>";
						html += "<td>" + comment[i].content + "</td>";
						html += "</tr>";
						html += "<tr>";
						html += "<td>等级：</td>";
						if (comment[i].level == 5){
							html += "<td>好评</td>";
						}
						if (comment[i].level == 3){
							html += "<td>中评</td>";
						}
						if (comment[i].level == 1){
							html += "<td>差评</td>";
						}
						html += "</tr>";
						html += "<tr>";
						html += "<td>好评率：95%</td>";
						html += "</tr>";
						html += "<tr>";
						html += "<td>";
						html += "<a href='javascript:updateLikeNum("+comment[i].id+")'>点赞</a>"
						html += "</td>";
						html += "<td>"+comment[i].likeNum+"</td>";
						html += "</tr>";
						html +="<tr>";
						html += "<td>";
						html += "<span>评价图片：<img src='/img/_/itemlike03.png' width='300px' height='300px'></span>";

						/*if(comment[i].parentId == null || comment[i].parentId == ""){
							html += "<a href='javascript:toEvaluateReply("+ comment[i].id +","+ goodsId +")'>回复</a>";
						}*/
						html += "</td>";
						html +="</tr>";
						html += "</table>";
						html += "<br>";
					}
					html += '<div class="pageNum">';
					html += '<form id="pageForm">';
					html += '<ul>';
					html += '<li><a href="javascript:toPage(1);">首页</a></li>';
					html += '<li class="threeword"><a href="javascript:toPage(2)">上一页</a></li>';
					html += '<div id="pages"></div>';
					html += '<li class="threeword"><a href="javascript:toPage(3)">下一页</a></li>';
					html += '<li class="threeword"><a href="javascript:toPage(4)">末页</a></li>';
					html += '</ul>';
					html += '<input type="hidden" name="pageNumber" id="pageNumber" size="2">';
					html += '<input type="hidden" name="pageSize" id="pageSize" size="2">';
					html += '<input type="hidden" name="totalCount" id="totalCount" size="2">';
					html += '<input type="hidden" name="totalPage" id="totalPage">';
					html += '</form>';
					html += '</div>';
					$("#four").html(html);
					buildPage(result.data);
				}else{
					alert("查询失败");
				}
			},
			error:function(){
				alert("系统错误");
			}
		})

		function buildPage(data) {
			$("#showPages").html(data.totalPage);
			$("#showCount").html(data.total);

			$("#pageNumber").val(data.pageNumber);
			$("#totalPage").val(data.totalPage);
			$("#totalCount").val(data.total);

			var str = '';
			for(var i = 1;i<=data.totalPage;i++){
				str += '<li>';
				str += '<a href="javascript:setPageNumber('+i+')">'+i+'<a/>';
				str += '</li>';
				$("#pages").html(str);
			}
		}
	}

	function toPage(flag) {
		var pageNumber = parseInt($("#pageNumber").val());
		var totalPage = parseInt($("#totalPage").val());
		if (flag == 1) {
			if (pageNumber <= 1) {
				alert("已经是第一页");
				return;
			}
			$("#pageNumber").val(1);
		} else if (flag == 2) {
			if (pageNumber <= 1) {
				alert("已经是第一页");
				return;
			}
			$("#pageNumber").val(pageNumber - 1);
		} else if (flag == 3) {
			if (pageNumber >= totalPage) {
				alert("已经是最后一页");
				return;
			}
			$("#pageNumber").val(pageNumber + 1);
		} else if (flag == 4) {
			if (pageNumber >= totalPage) {
				alert("已经最后第一页");
				return;
			}
			$("#pageNumber").val(totalPage);
		}
		getCommentByGoodsId();
	}

	//设置页数
	function setPageNumber(number){
		$("#pageNumber").val(number);
		getCommentByGoodsId();
	}

	//点赞
	function updateLikeNum(id) {
       $.ajax({
		   url: "http://localhost:9020/comment/updateLikeNum",
		   type: "post",
		   dataType: "json",
		   data: {id:id},
		   success:function (result) {
                if (result.code==200){
                	alert("点赞成功");
					location.reload();
				}
		   },
		   error:function () {
				alert("点赞系统错误")
		   }
	   })
	}
	function toEvaluateReply(id, goodsId){
		location.href="http://localhost:9020/comment/toEvaluateReply?id=" + id + "&goodsId=" + goodsId;
	}

</script>
</html>